import { initMixin } from "./init.js";
import { renderMixin } from "./render.js";
import { lifecycleMixin } from "./lifecycle.js";
import { stateMixin } from "./state.js";
import { initGlobalApi } from "./global-api/index.js";

function Vue(options) {
  // options: 为用户传入的选项
  this._init(options); // 初始化操作， 组件也需要， 从而将其作为一个公共方法
}

// 扩展Vue的原型方法
// Vue.prototype._init = function (options) {
//   console.log(options);
// }

initMixin(Vue);
renderMixin(Vue);
lifecycleMixin(Vue);
stateMixin(Vue);

// 扩展全局的Vue方法
initGlobalApi(Vue);

// // diff 核心
// import { compileToFunction } from "./compiler/index.js";
// import { createElem, patch } from "./vdom/patch.js";

// let oldTemplate = `<div style="color:red" a="1">
// <ul>
//   <li>1</li>
//   <li>2</li>
//   <li>3</li>
//   <li>4</li>
// </ul>
// </div>`; // vue2中模板必须包含一个标签， 而vue3中没有这个限制
// // vue3 是在最外层创建了一个根节点， 所以模板中可以有多个标签元素

// let vm1 = new Vue({ data: { message: "hello world" } });
// const render1 = compileToFunction(oldTemplate);
// const oldVnode = render1.call(vm1); // 虚拟dom
// // console.log(oldVnode);
// document.body.appendChild(createElem(oldVnode));

// let newTemplate = `<div>
// <ul>
//   <li>1</li>
//   <li>3</li>
//   <li>1</li>
//   <li>2</li>
// </ul>
// </div>`;
// let vm2 = new Vue({ data: { message: "zf" } });
// const render2 = compileToFunction(newTemplate);
// const newVnode = render2.call(vm2); // 虚拟dom
// // console.log(newVnode);
// // document.body.appendChild(createElem(newVnode));
// setTimeout(() => {
//   patch(oldVnode, newVnode);
// }, 2000);

// 更新新的虚拟节点更新老的节点， 老的能复用的就尽量复用
export default Vue;
